<template>
  <div class="select-icon" style="height: 17px">
    <!-- 单个时间选择 -->
    <el-dropdown  v-if="type=='date'" trigger="click" class="ml10">
      <span class="el-dropdown-link">
        <i :class="icon"></i>
        {{text}}
        <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>

      <el-dropdown-menu slot="dropdown">
        <el-date-picker
          class="el-gclife-date"
          @change="selectDate"
          :format="date_type === 'DAY' ? 'yyyy-MM-dd' : (date_type === 'MONTH' ? 'yyyy-MM' : (date_type === 'YEAR' ? 'yyyy' : 'yyyy-MM'))"
          :value-format="date_type === 'DAY' ? 'yyyy-MM-dd' : (date_type === 'MONTH' ? 'yyyy-MM' : (date_type === 'YEAR' ? 'yyyy' : 'yyyy-MM'))"
          v-model="handDate"
          prefix-icon=""
          :type="date_type === 'DAY' ? 'date' : (date_type === 'MONTH' ? 'month' : (date_type === 'YEAR' ? 'year' : 'month'))"
          :placeholder="$I18n['select' + date_type]">
        </el-date-picker>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 起止时间 -->
    <el-dropdown v-if="type=='dates'" trigger="click" class="ml10">
      <span class="el-dropdown-link">
        <i :class="icon"></i>
        {{text}}
        <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>

      <el-dropdown-menu slot="dropdown">
        <el-date-picker
        class="el-gclife-date"
        @change="selectDates"
        type="daterange"
        v-model="yearMonth"
        value-format="yyyy-MM-dd"
        :placeholder="$I18n.selectMonth">
        </el-date-picker>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 列表选择 -->
    <el-dropdown v-if="type=='list'" trigger="click" class="ml10" @command="selectList($event)">
      <span class="el-dropdown-link">
        <i :class="icon"></i>
        {{text}}
        <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(so, index) in datalist" :key="index" :command="so">{{so.codeName}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 动作 -->
    <el-dropdown v-if="type=='action'" trigger="click" class="ml10">
      <span class="el-dropdown-link">
        <i :class="icon"></i>
        {{i18n.action}}
        <i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>{{i18n.delete}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import EventBus from '@/services/eventBus'
export default {
  /* 'icon': 图标
     'text': 文本
     'type'类型: date(单个日期), dates(两个日期), list(列表)
     'datalist': 列表数据,在type为list时生效
     'keys': 传给后端的键
     'startKey': 传给后端的开始日期的键，在type为dates时生效
     'endKey': 传给后端的结束日期的键，在type为dates时生效
     回调事件
     'select': 选择后回调，返回选择数据
  */
  props: ['icon', 'text', 'type', 'datalist', 'keys', 'startKey', 'endKey', 'date_type'],
  data() {
    return {
      handDate: '',
      yearMonth: [],
      obj: {}
    }
  },
  methods: {
    // 选择日期
    selectDate(handle) {
      this.obj = {key: this.keys, text: this.text, value: handle}
      this.obj[this.keys] = handle
      // 带上传给后端的参数
      this.$emit('select', this.obj)
    },
    // 选择起止日期
    selectDates(handle) {
      // obj.key的作用:作为唯一标识, 防止重复添加tag
      this.obj = {key: this.startKey + '_' + this.endKey, text: this.text, value: handle[0] + ' 至 ' + handle[1]}
      this.obj[this.startKey] = handle[0]
      this.obj[this.endKey] = handle[1]
      this.$emit('select', this.obj)
    },
    // 选择列表
    selectList(handle) {
      this.obj = {key: this.keys, text: this.text, value: handle.codeName}
      this.obj[this.keys] = handle.codeKey
      this.$emit('select', this.obj)
    }
  },
  mounted() {
    EventBus.$on('closeTag', key => {
      if (this.obj.key === key) {
        // console.log('监听到了', key)
        // console.log('obj.key', this.obj.key)
        this.handDate = ''
        this.yearMonth = []
      }
      // this.obj.key === key && console.log(321, this) && (this.yearMonth = []) && (console.log(123, this.yearMonth))
      // this.obj.key === key && console.log(this.handDate = '1')
    })
  }

}
</script>

<style lang="stylus" rel="stylesheet/stylus">


</style>
